<template>
  <div id="centerQuery">
    <div class="filterQuery">
      <div class="tiao">
        <el-input
          placeholder="请输入填表人名称"
          v-model="fillName"
          class="input-with-select"
          size="small"
          style="margin-left: 30px;"
        >
          <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
        </el-input>
        <button class="upfile" @click="gofile">上传中等文件</button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="zdId" label="序号" align="center" width="70"></el-table-column>
        <el-table-column prop="regNo" label="登记证明编号" align="center"></el-table-column>
        <el-table-column prop="fillName" label="填表人名称" align="center"></el-table-column>
        <el-table-column prop="transValue" label="转让财产价值" align="center"></el-table-column>
        <el-table-column prop="regDate" label="登记时间 " align="center"></el-table-column>
        <el-table-column prop="state" label="查询状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1" style="color: #01650A;">查验通过</span>
            <span v-else style="color: #C90303;">未通过或未查验</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="down(scope.row)">预览</el-button>
            <el-button type="primary" size="mini" @click="look(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "centerQuery",
  data() {
    return {
      tableData: [],
      value: "",
      fillName: "",
      currentPage: 1,
      total: null,
      path: ''
    };
  },
  mounted() {
    this.getdata(1);
  },
  methods: {
    down (row) {
      window.open(this.$bus.baseURL+'AdminAPI'+row.path);
    },
    getdata(val) {
      this.currentPage = val;
      let obj = {
        fillName: this.fillName,
        page: this.currentPage
      };
      this.axios
        .get("AdminAPI/zdCheck/queryZDList", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        });
    },
    gofile() {
      this.$router.push("centerQueryfile");
    },
    look(row) {
      this.$router.push("lookcenterQuery");
      this.$router.push({name:'lookcenterQuery', query: {id: row.zdId}})
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    }
  },
  // watch: {
  //   fillName: function() {
  //     this.getdata(1);
  //   }
  // },
};
</script>

<style lang="scss">
#centerQuery {
  .filterQuery {
    margin-top: 10px;
    background: #e2eefd;
    padding-left: 2px;
    position: relative;
    .tiao {
      padding: 6px 0;
      display: flex;
      justify-content: space-between;
      .el-input {
        width: 230px;
      }
      .upfile {
        width: 180px;
        // height: 39px;
        background: rgba(242, 146, 7, 1);
        box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
        border-radius: 10px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
        margin-right: 50px;
      }
    }
  }
  .table {
    background: white;
    padding-top: 26px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>
